﻿@page "/numeric"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Numeric
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>Numeric</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of Numeric
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    As all Radzen Blazor input components the <strong>Numeric</strong> has a Value property which gets and sets the value of the component. Use <code>@@bind-Value</code> to get the user input.
</RadzenText>
<RadzenExample ComponentName="Numeric" Example="NumericBindValue">
    <NumericBindValue />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of Numeric using Value and Change event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Value property can be used to set the value of the component and <code>Change</code> event to get the user input.
</RadzenText>
<RadzenExample ComponentName="Numeric" Example="NumericChangeEvent">
    <NumericChangeEvent />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Min set to 1 and Max set to 10
</RadzenText>
<RadzenExample ComponentName="Numeric" Example="NumericMinMax">
    <NumericMinMax />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Placeholder and 0.5 step
</RadzenText>
<RadzenExample ComponentName="Numeric" Example="NumericPlaceholderAndStep">
    <NumericPlaceholderAndStep />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Without Up/Down
</RadzenText>
<RadzenExample ComponentName="Numeric" Example="NumericWithoutUpDown">
    <NumericWithoutUpDown />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Formatted value
</RadzenText>
<RadzenExample ComponentName="Numeric" Example="NumericFormattedValue">
    <NumericFormattedValue />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Align value
</RadzenText>
<RadzenExample ComponentName="Numeric" Example="NumericAlign">
    <NumericAlign />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Custom Value convert
</RadzenText>
<RadzenExample ComponentName="Numeric" Example="NumericConvertValue">
    <NumericConvertValue />
</RadzenExample>